import React from 'react';
import 'antd/dist/antd.css'
import {sideMenuList} from "./mockup";
import {Menu} from 'antd'
import {GifOutlined} from '@ant-design/icons'
import './myslidermenu.css'
import {nanoid} from 'nanoid'
function Myslidermenu() {
    return (
            <div className="myslidermenu" style={{background:'red'}}>
                <Menu mode="vertical">
                    {
                        sideMenuList.map((item)=>(
                            <Menu.SubMenu title={<span><GifOutlined/>{item.title}</span>} key={nanoid()}>
                                {
                                    item.subMenu.map((sitem)=>(
                                    <Menu.SubMenu title={<span><GifOutlined/>{sitem.title}</span>} key={nanoid()}>
                                        {
                                            sitem.subMenu.map((ssitem)=>(
                                                <Menu.Item key={nanoid()}>
                                                    <span><GifOutlined/>{ssitem}</span>
                                                </Menu.Item>
                                            ))
                                        }
                                    </Menu.SubMenu>
                                    ))
                                }
                            </Menu.SubMenu>
                        ))
                    }
                </Menu>
            </div>
    );
}

export default Myslidermenu;
